<template>
	<view class="template-tools-housecalc">
		<tn-nav-bar fixed :bottomShadow="false" customBack backTitle="" backgroundColor="#ffd946">
			<view class="top-tab">
				<tn-tabs :list="houseCalcTypes" :itemWidth="120" :gutter="0" :height="tabsHeight" :showBar="false" activeColor="#000" :bold="true" :fontSize="30" :current="tabIndex" @change="topTabsChange"></tn-tabs>
			</view>
			<view class="top-right" slot="right">
				<text class="tn-icon-close" @click="close"></text>
			</view>
		</tn-nav-bar>
		<view  :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="container-page">
			<view style="padding:0rpx 20rpx;">
				<view class="content">
					<business @submit="submit" ref="business" v-if="tabIndex === 0"></business>
					<accumulation @submit="submit" ref="accumulation" v-if="tabIndex === 1"></accumulation>
					<group @submit="submit" ref="group" v-if="tabIndex === 2"></group>
				</view>
				<view class="btn">
					<tn-button backgroundColor="tn-bg-gray" class="reset" size="normal" @click="reset">重置</tn-button>
					<tn-button class="common-button save" size="normal" @click="save">确认</tn-button>
				</view>
			</view>
		</view>
		
		
		<tn-modal v-model="resultShow" :custom="true" showCloseBtn>
			<view class="result-modal-content">
				<yiyi-title title="贷款计算结果" />
				<view class="content tn-flex tn-flex-direction-column tn-flex-col-center">
					
				</view>
			</view>
		</tn-modal>
		
	</view>
</template>

<script>
import business from './components/calculator/business.vue';
import accumulation from './components/calculator/accumulation.vue';
import group from './components/calculator/group.vue';
import { houseCalcTypes } from '@/utils/enums';
export default {
	components: {
		business,
		accumulation,
		group
	},
	data() {
		return {
			houseCalcTypes,
			resultShow: false,
			tabIndex: 0
		};
	},
	onLoad() {},
	computed: {
		tabsHeight() {
			return (this.vuex_custom_bar_height - this.vuex_status_bar_height) + 'px';
		}
	},
	methods: {
		/**顶部切换
		 * @param {Object} index
		 */
		topTabsChange(index) {
			this.tabIndex = index;
		},
		/**
		 * 关闭当前窗口
		 */
		close() {
			uni.$common.navigateBack();
		},
		submit(obj, type) {
			console.info(obj);
			console.info(type);
			this.resultShow = true;
		},
		reset(){
			this.$refs[this.houseCalcTypes[this.tabIndex].id].reset();
		},
		save() {
			this.$refs[this.houseCalcTypes[this.tabIndex].id].submit();
		}
	}
};
</script>

<style lang="scss" scoped>
.template-tools-housecalc {
	.top-right {
		font-size: 40rpx;
		margin-right: 20rpx;
		font-weight: bold;
	}
}
.btn {
	margin-top: 20rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.reset {
		width: 40%!important;
	}
	.save {
		width: 40%!important;
	}
}
</style>
